<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // js沙箱 proxy
    // 快照沙箱 1年前拍照 现在拍一张 （对比后将差异保存起来） 这样可以回到一年前，反之回到一年前后也可以到现在

    class SnapshotSandbox {
      constructor() {
        this.proxy = window; // 即window属性
        this.modifyPropsMap = {}; // 记录在window上的修改
        this.active();  // 默认激活 进行记录状态
      }

      active() {
        this.windowSanpshot = {}; // 拍照 对window上的属性进行记录
        for(const prop in window) {
          if(window.hasOwnProperty(prop)) {
            this.windowSanpshot[prop] = window[prop];
          }
        }

        // 将更改应用到window上
        Object.keys(this.modifyPropsMap).forEach(p => {
          window[p] = this.modifyPropsMap[p];
        })
      }

      inactive() { // 失活
        for (const prop in window) {
          if (window.hasOwnProperty(prop)) {
            if(window[prop] !== this.windowSanpshot[prop]) {
              this.modifyPropsMap[prop] = window[prop]; // 对比后记录修改

              window[prop] = this.windowSanpshot[prop]; // 变回之前
            }
          }
        }
      }
    }

    let sandbox = new SnapshotSandbox();

    ((window) => {
      window.a = 1;
      window.b = 2;
      console.log(window.a, window.b);

      sandbox.inactive();
      console.log(window.a, window.b);

      sandbox.active();
      console.log(window.a, window.b);
    })(sandbox.proxy); // sandbox.proxy就是window

    // 如果是多个子应用，就不能使用这种方式，可以使用es6的proxy，创建多个proxy

    // 代理沙箱可以实现多应用沙箱，把不同的应用用不同的代理处理 
  </script>
</body>
</html>